<template>
    <div class="worker">
        <van-nav-bar title="xx作业人员" :border="false" />
        <div class="tab-box">
            <van-tabs animated v-model:active="active" @change="tabChange">
                <van-tab v-for="(item,index) in tabList" :key="item.id" :title="item.name">
                    <component :is="item.comp" v-if="active == index" />
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue"
import scanToFill from "./components/scanToFill.vue";
import appointClean from "./components/appointClean/index.vue";
import dailyClean from "./components/dailyClean/index.vue";

const active = ref(1)
const tabList =
    [
        {
            id: 1,
            name: '扫码填报',
            comp: scanToFill,

        },
        {
            id: 2,
            name: '日常清运',
            comp: dailyClean,

        },
        {
            id: 3,
            name: '预约清运',
            comp: appointClean,

        }
]
const tabChange = (index) => {
    console.log("🚀 ~ tabChange ~ index:", index)
    localStorage.setItem('tabActive', index)
}
onMounted(() => {
    let tabActive = localStorage.getItem('tabActive')
    if (tabActive) {
        active.value = +tabActive
    }
})
</script>

<style lang="scss" scoped>
.worker {
    background-color: #fff;
}

::v-deep(.van-tab) {
    font-size: 30px;
}

::v-deep(.van-tabs__line) {
    width: 44px;
    height: 8px;
    border-radius: 10px;
    background: linear-gradient(160.78deg, rgba(0, 160, 252, 1) 0%, rgba(8, 173, 255, 1) 100%);
}

.worker {}
</style>